<template>
  <div class="container">
    <!-- 步骤条 -->
    <el-steps :active="step" finish-status="success" align-center>
      <el-step title="基本信息"/>
      <el-step title="扩展信息"/>
      <el-step title="模型配置"/>
    </el-steps>

    <el-form ref="form" :model="form" :rules="rules" label-width="210px" style="margin-top:30px;">
      <!-- 第 1 段 -->
      <div v-show="step===0">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请填写名称" clearable/>
        </el-form-item>
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" placeholder="请填写编码" clearable/>
        </el-form-item>
        <el-form-item label="所属分类" prop="categoryId" clearable>
          <el-select
              v-model="form.categoryId"
              placeholder="请填写分类"
              class="handle-select mr10"
              filterable
              clearable
          >
            <el-option
                v-for="item in categoryList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="排序" prop="seq">
          <el-input-number
              v-model="form.seq"
              placeholder="请填写数字"
              :min="1"
              :max="999"
              :step="1"
              step-strictly>
          </el-input-number>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input
              size="small"
              v-model="form.remark"
              placeholder="请填写备注"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4 }"
              show-word-limit
              maxlength="99"
          ></el-input>
        </el-form-item>
      </div>

      <!-- 第 2 段 -->
      <div v-show="step===1">
        <el-form-item label="表单类型" prop="formType">
          <el-radio-group v-model="form.formType">
            <el-radio label="NONE">无表单</el-radio>
            <el-radio label="FORM">表单</el-radio>
            <el-radio label="CUSTOM">自定义</el-radio>
            <el-radio label="FIXED">固定格式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="表单路径" prop="formPath" v-if="form.formType === 'CUSTOM'">
          <el-input v-model="form.formPath" placeholder="请填写表单路径" clearable/>
        </el-form-item>
        <el-form-item label="所属表单" prop="formId" placeholder="请填写表单" v-if="form.formType === 'FORM'" clearable>
          <el-select
              v-model="form.formId"
              placeholder="请填写表单"
              class="handle-select mr10"
              filterable
          >
            <el-option
                v-for="item in formList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </div>

      <!-- 第 3 段 -->
      <div v-show="step===2">

      </div>

      <!-- 按钮 -->
      <el-form-item style="text-align:center;margin-top:30px;">
        <el-button size="small" v-if="step>0" @click="prev">上一步</el-button>
        <el-button size="small" @click="next">{{ step === 2 ? '提交' : '下一步' }}</el-button>
        <el-button size="small" @click="goBack">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import {
  flowModelDetailApi,
  flowModelEditApi,
  flowModelSaveApi,
} from "../../api/flow/flowModel";
import {createObjectBase, deepCopy} from "@/utils";

import {flowCategoryListEnabledApi} from "@/api/flow/flowCategory";
import {flowFormListEnabledApi} from "@/api/flow/flowForm";

const obj = {
  id: "",
  name: "",
  code: "",
  categoryId: "",
  formId: "",
  formType: "NONE",
  formPath: "",
  remark: "",
  seq: 1,
  modelContent: {
    "node": {
      "name": "名称"
    }
  },
};

export default {
  data() {
    return {
      step: 0,
      categoryList: [],
      formList: [],
      form: deepCopy(obj),
    };
  },
  computed: {
    rules() {
      const base = {
        name: [
          {required: true, message: "请填写名称", trigger: "change"},
          {max: 50, message: "长度不能超过50个字符", trigger: "change"},
        ],
        code: [
          {max: 32, message: "长度不能超过32个字符", trigger: "change"},
        ],
        categoryId: [
          {required: true, message: "请选择分类", trigger: "change"},
        ],
        remark: [
          {max: 99, message: "长度不能超过99个字符", trigger: "change"},
        ],
      };
      if (this.form.formType === "FORM") {
        base.formId = [{required: true, message: "请选择表单", trigger: "change"}];
      }
      if (this.form.formType === "CUSTOM") {
        base.formPath = [
          {required: true, message: "请填写表单路径", trigger: "change"},
          {max: 250, message: "长度不能超过250个字符", trigger: "change"},
        ];
      }
      return base;
    },
  },
  methods: {
    next() {
      this.$refs.form.validate(valid => {
        if (!valid) return;
        if (this.step === 2) {
          this.saveEdit();
        } else {
          this.step++;
        }
      });
    },
    prev() {
      this.step--;
    },
    getFlowCategoryList() {
      flowCategoryListEnabledApi().then((res) => {
        this.categoryList = res?.bizData;
      });
    },
    getFlowFormList() {
      flowFormListEnabledApi().then((res) => {
        this.formList = res?.bizData;
      });
    },
    getDetail(id) {
      if (!id) {
        if (this.$refs.form != undefined) {
          this.$refs['form'].resetFields();
        }
      } else {
        flowModelDetailApi({id}).then((res) => {
          const data = deepCopy(res?.bizData);
          if (data.formId === '0') data.formId = null;
          this.form = data;
        });
      }
    },
    saveEdit() {
      this.form.formType === 'NONE' && (this.form.formId = '0');
      const data = createObjectBase(this.form, Object.keys(obj));
      const {id} = data;
      const fn = id ? flowModelEditApi : flowModelSaveApi;
      fn(data).then((res) => {
        this.goBack();
      });
    },
    goBack() {
      this.$router.goPage({
        path: "/flow/model/page",
      });
    },
  },
  created() {
    this.getFlowCategoryList();
    this.getFlowFormList();

    const {id} = this.$route.query;
    this.getDetail(id);
  },
};
</script>

<style scoped>
.cm-keyword {
  color: blue;
}

.cm-string {
  color: green;
}

.cm-comment {
  color: gray;
}
</style>
